import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { globalStyles } from '../styles/global';
import  Card  from '../shared/card';

export default function Home({ navigation }) {
    const [reviews, setReviews] = useState([
        { title: 'i am a joker', rating: 5, body: 'lorem ipsum', key: '1' },
        { title: 'grammer in use', rating: 10, body: 'lorem ipsum', key: '2' },
        { title: 'test', rating: 15, body: 'dfasdf', key: '3' }
    ]);
    const pressHandler = (item) => {
        navigation.navigate('ReviewDetail', item);
    }
    return (
        <View style={globalStyles.container}>
            <FlatList data={reviews} renderItem={({ item }) => {
                return (
                    <TouchableOpacity onPress={() => pressHandler(item)}>
                        <Card>
                            <Text style={globalStyles.titleText}>{item.title}</Text>
                        </Card>

                    </TouchableOpacity>
                )
            }} />
        </View>
    )
}

